<template>
	<view>
		<back></back>
		<view style="padding: 0 20rpx;" v-for="item in list">
			<view class="info u-flex">
				<image class="in_img" :src="item.image" mode="aspectFill"></image>
				<view class="in_rig">
					<view class="in_bla">{{item.title}}</view>
					<view class="in_gre">{{item.difference}}</view>
				</view>
			</view>
			<view class="fen info">
				<view class="fen_tit in_bla">
					请为该商品打分
				</view>
				<u-rate gutter="37" size="36" active-color="#FF4E02" inactive-color="#BEBEBE" :count="count"
					v-model="item.state" ></u-rate>
				<textarea v-model="item.comment" placeholder-style="color: #BEBEBE;"
					placeholder="从多个角度评估产品可以帮助更多需要该商品的人，请留下您的评价~"></textarea>
				<view class=" u-flex-wrap" style="display: flex;">
					<view style="margin:0 20rpx 28rpx 0 ;" class="-flex-center u-flex-col">
						<view class="fen_two u-flex-center">
							<image src="@/static/wImg/phone.png" @click="uploadImg(item)" class="img_ph"></image>
						</view>
						<view class="grey">点击上传照片</view>
					</view>
					<view class="fen_pho u-flex-center" @click="yu(it,ind)" v-for="it,ind in item.imgList">
						<image :src="it" class="img_tu" mode="aspectFill"></image>
						<view @click.stop="delFn(item,ind)">
							<u-icon name="close" color="#8c8c8c" class="img_clo"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="foot" :style="'padding-bottom:' + bottom + 'px'">
			<view class="btn u-flex-center" @tap="$u.throttle(submit, 1700)">
				发布评价
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value: 2,
				bottom: 0,
				id: '',
				list: [],
				shop_id:''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.info()
			let res = uni.getSystemInfoSync()
			if (res.safeAreaInsets.bottom == 0) {
				this.bottom = 13;
			} else {
				this.bottom = res.safeAreaInsets.bottom;
			}
		},
		methods: {
			info() {
				this.$u.get('/api/wanlshop/order/getOrderInfo', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data.goods
						this.shop_id = res.data.shop_id

						for (let i = 0; i < this.list.length; i++) {
							this.$set(this.list[i], "imgList", []);
							this.$set(this.list[i], "state", '');
						}
					}
				});
			},
			uploadImg(item) {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: function(res) {
						uni.uploadFile({
							url: 'https://apishop.qiancdj.com/api/common/upload', //上传
							filePath: res.tempFilePaths[0],
							name: "file",
							header: {
								token: uni.getStorageSync('token')
							},
							success: function(resT) {
								let data = JSON.parse(resT.data)
								item.imgList.push(data.data.fullurl)
							},
							fail: function(err) {

							}
						});
					}
				})
			},
			delFn(item, ind) {
				item.imgList.splice(ind, 1)
			},
			yu(it, ind) {
				// 预览图片
				let imgsArray = [];
				imgsArray.push(it);
				uni.previewImage({
					current: ind,
					urls: imgsArray
				});
			},
			submit() {
				let arr = []
				this.list.map(item => {
					let obj = {
						comment: item.comment,
						difference: item.difference,
						goods_id: item.goods_id,
						id: item.id,
						image: item.image,
						imgList: item.imgList,
						state: item.state,
						title: item.title,
					}
					arr.push(obj)
				})
				let shop = {}
				shop.id = this.shop_id
				this.$u.post('/api/wanlshop/order/commentOrder', {
					goodsList:arr,
					order_id:this.id,
					shop:shop
				}).then(res => {
					if (res.code == 1) {
						this.$u.toast(res.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}else{
						this.$u.toast(res.msg)
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info {
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;

		.in_img {
			width: 146rpx;
			height: 146rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.in_rig {
			flex: 1;
			height: 146rpx;
		}

		.in_bla {
			font-weight: bold;
			font-size: 32rpx;
			color: #333;
			margin-bottom: 30rpx;
		}

		.in_gre {
			font-size: 28rpx;
			color: #B0B0B0;
		}
	}

	.fen {
		textarea {
			margin-top: 48rpx;
			line-height: 50rpx;
			font-size: 28rpx;
			height: 120rpx;
			margin-bottom: 18rpx;
		}

		.grey {
			font-size: 24rpx;
			color: #BEBEBE;
			margin: 0 auto;
			margin-top: 20rpx;
		}

		.fen_two {
			width: 168rpx;
			height: 168rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			border: 1rpx solid #D3D3D3;

			.img_ph {
				width: 70rpx;
				height: 63rpx;
			}
		}

		.fen_pho {
			width: 168rpx;
			height: 168rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-right: 28rpx;
			margin-bottom: 28rpx;
			position: relative;

			.img_tu {
				width: 100%;
				height: 100%;
			}

			.img_clo {
				position: absolute;
				top: 15rpx;
				right: 15rpx;
			}
		}
	}

	.foot {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 26rpx 60rpx;
		background: #fff;

		.btn {
			width: 632rpx;
			height: 80rpx;
			color: #fff;
			background: linear-gradient(98deg, #606DCE 0%, #606DCE 100%);
			border-radius: 40rpx;
		}
	}
</style>